﻿@page "/dropdown-widget"
@inject IStringLocalizer<DropdownWidgets> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["SubTitle"]</h4>

<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal">
    <div class="widget-demo">
        <DropdownWidget>
            <DropdownWidgetItem Icon="fa-regular fa-envelope" BadgeNumber="4">
                <HeaderTemplate>
                    <span>@Localizer["BasicUsageMessage"]</span>
                </HeaderTemplate>
                <BodyTemplate>
                    @for (var index = 0; index < 4; index++)
                    {
                        <div class="dropdown-item dropdown-item-center">
                            <Avatar IsCircle="true" IsIcon="true" Size="Size.Small" />
                            <div class="ms-2">
                                <div class="d-flex position-relative">
                                    <b>Argo Zhang</b>
                                    <small><i class="fa-regular fa-clock"></i> @(4 + index) mins</small>
                                </div>
                                <div class="text-truncate">Why not buy a new awesome theme?</div>
                            </div>
                        </div>
                    }
                </BodyTemplate>
                <FooterTemplate>
                    <div>@Localizer["BasicUsageViewMessage"]</div>
                </FooterTemplate>
            </DropdownWidgetItem>
            <DropdownWidgetItem Icon="fa-regular fa-bell" BadgeNumber="10" HeaderColor="Color.Success" BadgeColor="Color.Warning">
                <HeaderTemplate>
                    <span>@Localizer["BasicUsageNotify"]</span>
                </HeaderTemplate>
                <BodyTemplate>
                    @for (var index = 0; index < 10; index++)
                    {
                        <div class="dropdown-item dropdown-item-center">
                            <i class="fa-solid fa-users text-primary"></i>
                            <div class="ms-2">5 new members joined</div>
                        </div>
                    }
                </BodyTemplate>
                <FooterTemplate>
                    <div>@Localizer["BasicUsageViewNotify"]</div>
                </FooterTemplate>
            </DropdownWidgetItem>
            <DropdownWidgetItem Icon="fa-solid fa-flag" BadgeNumber="9" HeaderColor="Color.Danger" BadgeColor="Color.Danger">
                <HeaderTemplate>
                    <span>@Localizer["BasicUsageTasks"]</span>
                </HeaderTemplate>
                <BodyTemplate>
                    <div class="dropdown-item">
                        <div class="dropdown-item-progress">
                            <span>Design some buttons</span>
                            <small>20%</small>
                        </div>
                        <BootstrapBlazor.Components.Progress IsAnimated="true" IsStriped="true" Value="20" Color="Color.Primary"></BootstrapBlazor.Components.Progress>
                    </div>
                    <div class="dropdown-item">
                        <div class="dropdown-item-progress">
                            <span>Create a nice theme</span>
                            <small>40%</small>
                        </div>
                        <BootstrapBlazor.Components.Progress Value="40" Color="Color.Success"></BootstrapBlazor.Components.Progress>
                    </div>
                    <div class="dropdown-item">
                        <div class="dropdown-item-progress">
                            <span>Some task I need to do</span>
                            <small>60%</small>
                        </div>
                        <BootstrapBlazor.Components.Progress Value="60" Color="Color.Danger"></BootstrapBlazor.Components.Progress>
                    </div>
                </BodyTemplate>
                <FooterTemplate>
                    <div>@Localizer["BasicUsageViewTasks"]</div>
                </FooterTemplate>
            </DropdownWidgetItem>
        </DropdownWidget>
    </div>

</DemoBlock>

<AttributeTable Items="@GetAttributes()" Title="@Localizer["AttributeTitle"]" />
